<template>
	<view class="container">
		<uni-nav-bar :border="false" dark :background-color="transparentColor" status-bar title="个人中心" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		<view class="contain">
			<view class="header">
				<view class="avatarAndName">
					<!-- 头像区域 -->
					<view class="avatar">
						<!-- 头像外边缘 -->
						<view class="circle_outer">
							<!-- 头像内边缘 -->
							<navigator url="/pacakgeMy/pages/myInfo/myInfo" class="circle_inner">
								<!-- 头像 -->
								<img src="/static/我的-我的@2x.png" />
							</navigator>
						</view>
					</view>
					<view class="header_text">
						张先生 18337413823
					</view>
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="discount_coupon">
				<!-- 优惠券区域 -->
				<navigator class="discount_coupon_containt" url="/pacakgeMy/pages/coupon/coupon">
					<img src="/static/彩色-优惠券.png" alt="" />
					<view class="discount_coupon_containt_my">
						我的优惠券
					</view>
					<view class="discount_coupon_containt_count">
						<text>3张</text>
						<uni-icons type="right" size="23" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
					</view>
				</navigator>
				<!-- 我的订单区域 -->
				<view class="discount_coupon_order">
					<view class="discount_coupon_order_top">
						<view class="discount_coupon_containt_order_my">
							我的订单
						</view>
						<navigator url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							<text>全部订单</text>
							<uni-icons type="right" color="#949494" size="20" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
						</navigator>
					</view>
					<view class="discount_coupon_order_bottom">
						<navigator url="/pacakgeOrder/pages/unpaid/unpaid" class="discount_coupon_order_bottom_img_one">
							待支付
						</navigator>
						<navigator url="/pacakgeOrder/pages/notUse/notUse" class="discount_coupon_order_bottom_img_two">
							待使用
						</navigator>
						<navigator url="/pacakgeOrder/pages/notEvaluate/notEvaluate" class="discount_coupon_order_bottom_img_three">
							待评价
						</navigator>
					</view>
				</view>
				<!-- 我的服务区域 -->
				<view class="discount_coupon_order">
					<view class="discount_coupon_order_top">
						<view class="discount_coupon_containt_order_my">
							我的服务
						</view>
					</view>
					<view class="discount_coupon_serve_bottom">
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(3).png"/>
							</view>
							<navigator url="/pacakgeMy/pages/couponCenter/couponCenter">领券中心</navigator>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(4).png"/>
							</view>
							<view>邀请好友</view>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(5).png"/>
							</view>
							<navigator url="/pacakgeMy/pages/myCar/myCar">我的车辆</navigator>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(6).png"/>
							</view>
							<navigator url="/pacakgeMy/pages/record/record">消费记录</navigator>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(7).png"/>
							</view>
							<navigator url="/pacakgeMy/pages/maintenance/maintenance">我的维修</navigator>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(8).png"/>
							</view>
							<view>意见反馈</view>
						</view>
						<view class="discount_coupon_serve_little">
							<view class="discount_coupon_serve_little_img">
								<img src="/static/组 9@2x(9).png"/>
							</view>
							<view>收货地址</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 退出登录区域 -->
			<view class="logout">
				退出登录
			</view>
		</view>
		<!-- 绑定 currentTab 到子组件 导入的 自定义 tabbar -->
		<CustomNavigationBar :currentTab="currentTab" @updateCurrentTab="updateCurrentTab" />
		<!-- <navigator url="/pacakgeOrder/pages/cancle/cancle" style="width: 100rpx;height: 60rpx;background-color: blue;color: #fff;margin-right: 20rpx;">已取消</navigator>
		<navigator url="/pacakgeOrder/pages/completed/completed" style="width: 100rpx;height: 60rpx;background-color: blue;color: #fff;margin-right: 20rpx;">已完成</navigator>
		<navigator url="/pacakgeOrder/pages/merchantOrderist/merchantOrderist" style="width: 100rpx;height: 60rpx;background-color: blue;color: #fff;margin-right: 20rpx;">商家订单列表</navigator> -->
	</view>
</template>

<script>
	import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
	export default {
		components: {
		    CustomNavigationBar
		},
		data() {
			return {
				transparentColor: 'transparent',
				currentTab: 2 // 初始化 currentTab
			}
		},
		methods: {
			// // 假设在某个方法中需要传递 currentTab 值
			// someMethodThatNeedsToPassCurrentTab() {
			//     const newCurrentTab = 2; // 这里假设新的 currentTab 值为 2
			//     this.currentTab = newCurrentTab; // 更新父组件的 currentTab
			// },
			      
			updateCurrentTab(newCurrentTab) {
			    this.currentTab = newCurrentTab;
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
	padding-bottom: 2rpx;
}
/* .uni-nav-bar {
	height: 5vh;
}
.contain {
	height: 90vh;
} */
.header {
	background-image: url("/static/图层 1.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 750rpx 500rpx;
	height: 500rpx;
}

.avatar {
	text-align: center;
	padding: 10rpx 0;
	padding-top: 130rpx;
	background-color: rgba(0, 0, 0, 0);
}
.circle_outer {
	width: 130rpx;
	height: 130rpx;
	margin: 0 auto;
	padding: 20rpx;
	border-radius: 50%;
	background-color: rgba(255, 255,255, 0.05);
	display: flex;
	justify-content: center;
	align-items: center;
}
.circle_inner {
	width: 130rpx;
	height: 130rpx;
	padding: 10rpx;
	border-radius: 50%;
	background-color: rgba(255, 255,255, 0.1);
}
.circle_inner>img {
	width: 130rpx;
	height: 130rpx;
	background-color: #fff;
	border-radius: 50%;
}
.header_text {
	height: 88rpx;
	line-height: 88rpx;
	color: rgba(255, 255,255, 0.8);
	text-align: center;
	font-size: 36rpx;
	/* margin-bottom: 44rpx; */
}
.discount_coupon {
	padding: 0 30rpx;
	position: relative;
	top: -60rpx;
}
.discount_coupon_containt {
	background-color: #fff;
	border-radius: 15rpx;
	padding: 40rpx 30rpx;
	font-size: 32rpx;
	display: flex;
	justify-content: space-between;
}
.discount_coupon_containt>img {
	width: 55rpx;
	height: 55rpx;
	margin-right: 20rpx;
	margin-top: -10rpx;
}
.discount_coupon_containt_my {
	width: 350rpx;
}
.discount_coupon_containt_count {
	width: 220rpx;
	text-align: right;
}
.discount_coupon_order {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 40rpx 30rpx;
	border-radius: 15rpx;
}
.discount_coupon_order_top {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
	border-bottom: 6rpx solid #F7F7F7;
}
.discount_coupon_containt_order_my {
	font-size: 36rpx;
}
.discount_coupon_containt_order_count {
	color: #949494;
	font-size: 26rpx
}
.discount_coupon_order_bottom {
	padding-top: 30rpx;
	display: flex;
	justify-content: space-between;
}
.discount_coupon_order_bottom>navigator {
	width: 200rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background-color: aqua;
	border-radius: 10rpx;
	color: #fff;
	font-size: 22rpx;
	background-position: 0;
	background-repeat: no-repeat;
	background-size: 200rpx 100rpx;
}
.discount_coupon_order_bottom_img_one {
	background-image: url('/static/组 9@2x(0).png');
}
.discount_coupon_order_bottom_img_two {
	background-image: url('/static/组 9@2x(1).png');
}
.discount_coupon_order_bottom_img_three {
	background-image: url('/static/组 9@2x(2).png');
}
.discount_coupon_serve_bottom {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	text-align: center;
	font-size: 26rpx;
}
.discount_coupon_serve_little_img {
	width: 130rpx;
	height: 110rpx;
	padding-bottom: 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.discount_coupon_serve_little_img>img {
	width: 70rpx;
	height: 70rpx;
	margin: 0 auto;
	margin-right: 14rpx;
}
.discount_coupon_serve_little {
	width: 157rpx;
	margin-bottom: 20rpx;
}
.logout {
	width: 630rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 80rpx;
	text-align: center;
	margin: auto;
	margin-bottom: 200rpx;
	background-color: #D9D9D9;
	color: #fff;
	border-radius: 40rpx;
}
</style>